<template>
<div id="app">
  <div class="orderlist-box">
    <div class="usertext">
      <div class="userbox"><img src="" width="100%" height="100%" ></div>
      <h3>用户名</h3>
    </div>   
    <div class="itembox">
      <div class="itemhead">
        <h3 style="margin-bottom:0.3rem">已点菜单</h3>    
        <p style="color:#999">2017-05-12 15:30:10</p>
      </div>  
      <div class="itemlist">
        <div class="list" v-for="list in orderList">
          <div class="imgbox"><img src="static/images/demoimg.jpeg" width="100%" height="" style="border-radius:6px"></div>
          <div class="goodsname">{{list.name}}</div>
          <div class="goodsnum">x1</div>
          <div class="goodsmoney">￥122</div>
        </div>
      </div>  
      <div class="ordersum">
        <h3>微信点菜享受9.8折扣</h3>
        <h3>已优惠-￥31</h3>
        <h2>合计：<span>￥284</span></h2>
      </div>
    </div> 
  </div> 
<router-link to="/ordersucess"><div class="orderbtn">确认下单</div></router-link>
</div>
</template>

<script>
  export default {
    name: 'orderlist',
    data: function () {
      return {
        orderList: [
            { name: '菜品名称' },
            { name: '菜品名称' }
        ]
      }
    }
  }
</script>

<style scoped>
  .orderlist-box{
      background: #fff;
      margin:0.75rem;
      border-radius:6px;
  }
  .usertext{
      padding:0.75rem;
      border-bottom:1px #ddd dashed;
      display: flex;
      align-items: center;
  }
  .userbox{
      width: 50px;
      height: 50px;
      border-radius:100%;
      margin-right:0.75rem;
  }
  .userbox img{
      display: block;
      border-radius: 100%;
  }
  .itembox{
      padding: 0.75rem;
  }
  .itemhead{
      text-align: center;
      padding-bottom: 0.75rem;
  }
  .list{
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
  }
  .imgbox{
      width: 18%;
      height: 40px;
      border-radius: 6px;
      overflow: hidden;
  }
  .goodsname{
      width: 50%;
      padding-left: 0.5rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
  }
  .goodsnum{
      width: 10%;
      color:#F4791F;
      text-align: center;
  }
  .goodsmoney{
      width: 22%;
      text-align: right;
      color:#F4791F;
  }
  .ordersum{
      text-align: right;
  }
  .ordersum h3{
      color:#F4791F;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
  }
  .ordersum h2{
      color:#333;
      font-size:1rem;
      padding-top: 0.75rem;
      border-top: 1px dashed #eee;
  }
  .ordersum h2 span{
      font-size: 1.2rem;
      color:#F4791F;
  }
  .orderbtn{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.8rem;
      text-align: center;
      color: #fff;
      background: #62b900;
      font-size: 0.9rem;
  }
</style>